<template>
	<div id="app">
		<h2>vue 2.0 声明响应式变量方式---{{name}}</h2>
		<div>================================</div>
		<h2>vue 3.0 声明响应式变量方式---{{name}}</h2>
		<h2>使用let和const声明{{num1}}--{{num2}}--{{info.a}}--{{arrInfo}}</h2>
		<div><button @click="change">改变数据</button></div>
		<div  style="margin-top: 10px;">================================</div>
		<h2>reactive声明的变量:{{state.reactiveField}}===={{state.a[0].a}}</h2>
		<div><button @click="addReactive">reactive</button></div>
	</div>
</template>

<script>
	// 1、vue2.0原先通过data声明响应式属性 -- vue3.0通过 ref 和 reactive 来声明(在setup函数中来声明)
	// 2、data和setup的声明周期都是 处于生命周期函数 beforeCreate 和 Created 两个钩子函数之间，但是由下面的示例可以看出  data在前 setup在后 可以覆盖 data中声明的属性
	// 3、ref用法 见下方 setup-1 setup-2 setup-3 setup-4

	// 4、reactive 用法见下方
	// 5、ref和reactive 的区别
	import { ref, reactive } from 'vue'
	export default {
		name: 'app',
		data() {
			return {
				name: '沈梦瑶1'
			}
		},
		setup() {
			const name = ref('沈梦瑶2')
			// 1、通过对比发现 let const 都可以（网上都是const）只要return出去就可以
			// 2、改变值的话需要  xxx.value来改变
			// 3、ref可以初始化基础类型（但是貌似引用类型也可以，规范下只引用基础类型吧,但是好像不是响应式的,按照文案来吧 只赋值基础类型）
			// 4、总结 ref是用来 声明响应式属性的，且声明的是基础类型（数字、字符串、布尔值、空值）,改变值的方式为 xxx.value=xxx
			let num1 = ref(211)
			const num2 = ref(985)
			
			// 貌似引用类型也可以 初始化
			let obj = {
				a: '属性a',
				b: '属性b'
			}
			//  数组
			let arr=[1,2]
			let info = ref(obj)
			let arrInfo=ref(arr)
			// =====
			let change = () => {
				num1.value++
				num2.value = num2.value + 2
				obj.a = obj.a + 1				
				arr.push(Math.random())				
			}

			// ========
			// 1、reactive是用来声明 引用类型的响应式属性的 （数组、对象）
			// 2、使用方式为 state.XXX
			let state = reactive({
				reactiveField: 0,
				a: [{
					a: 1
				}]
			})
			const addReactive = () =>{
			    state.reactiveField++
			}
			return {
				name,
				num1,
				num2,
				change,
				info,
				addReactive,
				state,
				arrInfo,
				arr
			}
		}
	}
</script>